<template>
  <div class="addStatute">
    <h1
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #344563;
      "
    >
      添加法规
    </h1>
    <div class="form">
      <el-form
        :rules="rules"
        :inline="true"
        :model="AddData"
        class="demo-form-inline el_form"
        ref="rules"
      >
        <el-form-item label="法规编号">
          <el-input
            placeholder="法规编号，系统自动生成"
            style="width: 400px"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item label="法规名称" prop="statuteName">
          <el-input
            v-model="AddData.statuteName"
            placeholder="法规名称"
            style="width: 400px"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="AddData" class="demo-form-inline el_form"   :rules="rules">
        <el-form-item label="法规类型" prop="statuteTypeId">
          <el-select
            v-model="AddData.statuteTypeId"
            placeholder="法规类型"
            clearable
          >
            <el-option
              :key="v.statuteTypeId"
              v-for="v in statuteType"
              :label="v.statuteTypeName"
              :value="v.statuteTypeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <input type="file" name="file" @change="update" /> -->
        <el-upload
          class="upload-demo"
          name="multipartFile"
          action="http://118.31.58.45:8080/maintenance/upload"
          multiple
          :limit="3"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-exceed="handleExceed"
          :on-success="success"
          :file-list="fileList"
        >
          <el-button size="mediu" type="primary">点击上传</el-button>
        </el-upload>
      </el-form>
      <el-form
       :rules="rules"
        :model="AddData"
        label-width="80px"
        size="medium "
        style="margin-top: 50px"
      >
        <el-form-item label="资料说明" prop="details">
          <el-input
            type="textarea"
            v-model="AddData.details"
            style="width: 1100px; height: 300px"
            placeholder=" 1.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明。

2.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明

3.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明

4.维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明维修手册说明"
          ></el-input>
        </el-form-item>
        <div style="text-align: center">
          <el-button style="margin-right: 20px; width: 100px" @click="cancel"
            >取消</el-button
          >
          <el-button
            type="danger"
            style="background: #6554c0; border: none; width: 100px"
            @click="addDesc"
            >保存</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      AddData: {
        statuteName: "",
        statuteTypeId: "",
        details: "",
        fileAddress: "",
      },
      rules: {
        statuteName: [
          { required: true, message: "请输入法规名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        statuteTypeId:[
          { required: true, message: "请选择法规类型", trigger: "blur" },

        ],
        details:[
          { required: true, message: "请输入法规详情", trigger: "blur" },

        ]
      },
      statuteType: [],
      fileList: [],
    };
  },
  methods: {
    success: function ({ data }) {
      // console.log(data);
      this.AddData.fileAddress = data[0] + "";
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //取消
    cancel: function () {
      this.$router.push("/home/Fggl");
    },

    //下拉框渲染
    getData: function () {
      this.$axios({
        url: "/statuteType/list",
        method: "get",
      }).then(({ data }) => {
        this.statuteType = data.data;
      });
    },
    //上传文件
    update(e) {
      let file = e.target.files[0];
      let param = new FormData(); //创建form对象
      param.append("multipartFile", file); //通过append向form对象添加数据
      //console.log(param.get("file")); //FormData私有类对象，访问不到，通过get判断值是否传进去
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      this.$axios.post("/upload", param, config).then((res) => {
        // this.AddData.fileAddress=data.data[0]
        // console.log(res.data);
      });
    },
    //保存添加
    addDesc: function () {
      this.$axios({
        url: "/statute/add",
        method: "post",
        data: {
          details: this.AddData.details,
          fileAddress: this.AddData.fileAddress,
          statuteName: this.AddData.statuteName,
          statuteTypeId: this.AddData.statuteTypeId,
        },
      }).then(({ data }) => {
        console.log(data);
        if (data.code == 0) {
          this.$message.success("添加成功！");
          setTimeout(() => {
            this.$router.push("/home/Fggl");
          }, 1000);
        } else {
          this.$message.error("添加失败！请重新添加！");
        }
      });
    },
  },
  mounted: function () {
    this.getData();
  },
};
</script>
<style lang="less" >
.addStatute {
  padding: 30px;
}
.form {
  width: 1200px;
  margin: 30px auto;
}
.el_form {
  display: flex;
  justify-content: space-between;
}
.upload {
  background: #64c8bc;
  border: none;
}
.el-textarea__inner {
  height: 300px;
}
</style>